<template>
	<view class="app app-bg">
		<view class="box">
			<text class="label">姓名</text>
			<u-input
				v-model="name"
				type="text"
				input-align="right"
				placeholder="请输入"
				v-if="status === 3"
			/>
			<text class="text" v-else>{{ name }}</text>
		</view>
		<view class="box">
			<text class="label">性别</text>
			<block v-if="status === 3">
				<u-input
					placeholder="请选择"
					input-align="right"
					v-model="sex"
					type="select"
					@tap="show2 = true"
				/>
				<u-select
					v-model="show2"
					:list="list2"
					@confirm="confirm($event, 'sex')"
				></u-select>
			</block>
			<text class="text" v-else>{{ sex }}</text>
		</view>
		<view class="box">
			<text class="label">年龄</text>
			<block v-if="status === 3">
				<u-input
					placeholder="请选择"
					input-align="right"
					v-model="age"
					type="select"
					@tap="show = true"
				/>
				<u-select
					v-model="show"
					:list="list"
					@confirm="confirm($event, 'age')"
				></u-select>
			</block>
			<text class="text" v-else>{{ age }}</text>
		</view>
		<view class="box">
			<text class="label">入驻城市</text>
			<vk-data-input-address
				confirm-color="var(--main)"
				placeholder="请选择城市"
				input-align="right"
				v-if="status === 3"
				title="请选择城市"
				style="flex: 1"
				v-model="city"
				ref="address"
				:level="2"
			></vk-data-input-address>
			<text class="text" v-else>{{ city }}</text>
		</view>
		<view class="box upd">
			<text class="label">照片</text>
			<image
				class="card"
				:src="photo ? photo : require('@/static/icon/photo-bg.png')"
				@tap="chooseImage"
			></image>
		</view>
		<block v-if="status === 3">
			<view class="check" @click="flag = !flag">
				<checkbox active-color="#737373" shape="circle" :checked="flag" />
				<text>我已认真阅读并同意</text>
				<text class="text" @tap.stop="vk.navigateTo('/pages/login/agreement?type=PTRZ')">
					《平台入驻协议》
				</text>
			</view>
			<view class="btn" @tap="send">申请入驻</view>
		</block>
		<view v-else-if="status === 0 || status === 2" class="status_box">
			<image class="icon" src="@/static/icon/icon_wait.png"></image>
			<text>审核中......</text>
		</view>
		<view v-else-if="status === 1" class="status_box suss">
			<image class="icon" src="@/static/icon/icon_suss.png"></image>
			<text>审核通过！</text>
		</view>
		<block v-else-if="status === -1">
			<view class="status_box danger">
				<image class="icon" src="@/static/icon/icon_fail.png"></image>
				<text>审核通过！</text>
			</view>
			<view class="status_box danger_bottom">失败原因：图片不清晰。</view>
			<view class="btn" @tap="restart">重新编辑</view>
		</block>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import arr from "./arr.js"

export default {
	data() {
		return {
			name: "",
			sex: null,
			age: null,
			city: null,
			photo: "",
			flag: false,
			// 选项
			list: arr,
			list2: [
				{ value: "男", label: "男" },
				{ value: "女", label: "女" }
			],
			status: 3,

			show: false,
			show2: false
		}
	},
	onLoad() {
		this.init()
	},
	methods: {
		// 初始化
		init() {
			vk.callFunction({
				url: "client/user.queryForShifu",
				title: "获取中..."
			}).then(res => {
				if (!res.info) return
				const { sex, age, name, photo, city, status } = res.info
				this.name = name
				this.sex = sex
				this.age = age
				this.city = city
				this.photo = photo
				this.status = status
			})
		},
		// 选择
		confirm(e, type) {
			this[type] = e[0].value
		},
		// 选择图片
		chooseImage() {
			if (this.status !== 3) return
			uni.chooseImage({
				count: 1,
				sourceType: ["album"],
				success: res => {
					vk.uploadFile({
						title: "上传中...",
						filePath: res.tempFilePaths[0],
						suffix: "png",
						provider: "unicloud",
						success: res => {
							this.photo = res.url
						}
					})
				}
			})
		},
		// 申请入驻
		send() {
			const { name, sex, age, city, photo, flag } = this
			if (!flag) {
				return vk.toast("请先同意平台入驻协议")
			}
			if (vk.pubfn.isNull(name)) {
				return vk.toast("请输入姓名")
			}
			if (vk.pubfn.isNull(sex)) {
				return vk.toast("请选择性别")
			}
			if (vk.pubfn.isNull(age)) {
				return vk.toast("请选择年龄")
			}
			if (vk.pubfn.isNull(city)) {
				return vk.toast("请选择入驻城市")
			}
			if (vk.pubfn.isNull(photo)) {
				return vk.toast("请上传照片")
			}
			vk.callFunction({
				url: "client/user.moveReidForShifu",
				title: "提交中...",
				data: { name, sex, age, city, photo }
			}).then(res => {
				vk.toast("提交成功")
				this.city = res.city
				this.status = 0
			})
		},
		// 重新编辑
		restart() {
			this.city = null
			this.status = 3
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 20rpx;
}

.box {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 16rpx 20rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	.label {
		font-weight: bold;
	}
	.text {
		flex: 1;
		text-align: right;
		padding: 16rpx 0;
	}
}

.upd {
	flex-wrap: wrap;
	padding: 30rpx 20rpx;
	.label {
		width: 100%;
	}
	.card {
		width: 160rpx;
		height: 160rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
}

.check {
	padding: 22rpx 0 240rpx 0;
	display: flex;
	align-items: center;
	.text {
		color: #3ab54a;
	}
	/deep/ .uni-checkbox-wrapper {
		transform: scale(0.7);
		margin-top: -6rpx;
	}
}

.btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	background-color: #3ab54a;
	color: #ffffff;
	font-size: 28rpx;
}

.status_box {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 36rpx 0;
	color: #67c2ff;
	font-weight: bold;
	margin-top: 68rpx;
	.icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 14rpx;
	}
}
.suss {
	color: #23b453;
}
.danger {
	border-radius: 20rpx 20rpx 0 0;
	padding: 36rpx 0 16rpx;
}
.danger_bottom {
	margin: 0 0 40rpx;
	border-radius: 0 0 20rpx 20rpx;
	padding: 0 0 36rpx;
	font-size: 24rpx;
	font-weight: 400;
	line-height: 33rpx;
	color: #999999;
}
</style>
